<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="row">
                            <div class="col-lg-12">
                                <strong>Báo cáo doanh số theo quý</strong>
                            </div>    
                        </div>                        
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        
                            <div class="row">
                                <form role="form" method="POST" name="Report3">
                                <div class="col-lg-1">
                                    Năm:
                                </div>
                                <div class="col-lg-2">
                                    <?php echo $this->html_nam ?>
                                </div> 
                                <div class="col-lg-1">
                                    ĐL/CH:
                                </div>
                                <div class="col-lg-4" id="agent">
                                    <?php echo $this->agentHTML ?> 
                                </div>   
                                <div class="col-lg-2">
                                    <button type="submit" class="btn btn-primary">Xem báo cáo</button>   
                                </div>
                                </form>
                                <div class="col-lg-2 pull-right">
                                    <form method="POST" action="<?php echo $this->baseUrl()?>/admin/report5/export?nam=<?php echo $this->nam ?>&agent_id=<?php echo $this->agent_id ?>">
                                    <button class="btn btn-primary" id="submit">Xuất excel</button>  
                                    </form>
                                </div>
                            </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">            
            <div class="panel-body">
                <div class="table-reponsive">
                    <div id="jqxgrid">

                    </div>
                </div>
            </div>    
</div>
    <script type="text/javascript">
         $('#agent_id').multiselect({
         includeSelectAllOption:true,
            enableFiltering: true,
            maxHeight: '300',
            buttonText: function(options) 
            {
                var retStr = "";
                if (options.length === 0) {
                   retStr = "None selected";
                } else if(options.length <=1){
                   var textArray = [];
                   $.each(options,function(key,value){
                       textArray.push($.trim($(value).html()));
                   });
                   retStr = "<div class='pull-left restricted'>"+textArray.join(",")+"</div>";
                } else {
                   retStr = options.length+" selected";
                }
                return retStr+" <b class='caret'></b>";
            }  
        });
        $('#nam').multiselect({
            enableFiltering: true,
            maxHeight: '300',
            onChange: function(option, checked) {
                 $.post("<?php echo $this->baseUrl() ?>/admin/service/index/", 
            {
                action: 'getagentreport4',
                nam: $('#nam').val()
            },function (datas) {
                var items = eval(datas);
                //alert(items);exit();
                var jItem = items[0];
                         $('#agent').html(jItem.html);
                         $('#agent_id').multiselect({
                            includeSelectAllOption:true,
                            enableFiltering: true,
                            maxHeight: '300',
                            buttonText: function(options) 
                            {
                                var retStr = "";
                                if (options.length === 0) {
                                   retStr = "None selected";
                                } else if(options.length <=1){
                                   var textArray = [];
                                   $.each(options,function(key,value){
                                       textArray.push($.trim($(value).html()));
                                   });
                                   retStr = "<div class='pull-left restricted'>"+textArray.join(",")+"</div>";
                                } else {
                                   retStr = options.length+" selected";
                                }
                                return retStr+" <b class='caret'></b>";
                            }
                         });
                    });
                    
                if (checked) {
                    orderCount++;
                    $(option).data('order', orderCount);
                    
                }
                else {
                    $(option).data('order', '');
                }
            },
        });
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields:
                [
                    { name: 'id',type:'int'},
                    { name: 'name_customer', type: 'string' },                    
                    { name: 'quarter1', type: 'int' },
                    { name: 'quarter2', type: 'int' },
                    { name: 'quarter3', type: 'int' },
                    { name: 'quarter4', type: 'int' },                    
                    { name: 'total_quantity', type: 'int' },
                    { name: 'charges', type: 'float' }
            
                ],
                url:'<?php echo $this->baseUrl() ?>/admin/report5/service',
                data: {
                    nam: "<?php echo $this->nam; ?>",
                    agent_id: "<?php echo $this->agent_id; ?>" 
                },
                sortcolumn: 'charges',
                sortdirection: 'desc'
               
            };
         var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function () {
                }
            });
            var cellsrenderer = function (row, column, value) {
                return '<div style="text-align: left; margin-top: 5px;">&nbsp' +value + '</div>';
            };
            $("#jqxgrid").jqxGrid(
            {
                width: '100%',
                source: dataAdapter,  
                theme: 'bootstrap',
                pageable: true,
                showfilterrow: true,
                filterable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                selectionmode: 'multiplecellsadvanced',
                columnsResize: true,
                showaggregates: true,
                showstatusbar: true,
                statusbarheight: 20,
                rendergridrows: function (params) {
                    return params.data;
                },
                ready: function () {
                    $("#jqxgrid").jqxGrid('hideColumn', 'id');
                },
                columns: [
                  {text:'id',dataField:'id',cellsalgin:'right',width:0},
                  { text: 'Tên Khách hàng',cellsrenderer:cellsrenderer,editable: false, dataField: 'name_customer', width: '40%' },
                  { text: 'Quý 1', editable: false, dataField: 'quarter1', width: '10%',aggregates: ['sum'] },
                  { text: 'Quý 2', editable: false, dataField: 'quarter2', width: '10%',aggregates: ['sum'] },
                  { text: 'Quý 3', editable: false, dataField: 'quarter3', width: '10%',aggregates: ['sum'] },
                  { text: 'Quý 4', editable: false, dataField: 'quarter4', width: '10%',aggregates: ['sum'] },                  
                  { text: 'Năm', editable: false, dataField: 'total_quantity', width: '10%',aggregates: ['sum'] },
                  { text: 'Điểm', editable: false, dataField: 'charges', width: '10%',aggregates: ['sum'] }
                ]
            });
           
        });
    </script>
    
